<template>
    <div>
        <el-card class="box-card">
            <h3 style="padding-bottom: 12px;">消息中心</h3>
            <el-divider></el-divider>
            <h3 class="tip" v-if="total <= 0">暂时没有信息</h3>
            <el-collapse accordion class="coll"  @change="readMessage" v-if="total > 0">
            <el-collapse-item v-for="item in messageData" :key="item.id" :name="item.id">
                <template slot="title">
                    {{ item.title }}
                    <el-tag class="tag" type="danger" v-if="item.readed == false">未读</el-tag>
                    <el-tag class="tag" type="success" v-if="item.readed == true">已读</el-tag>
                </template>
                <div>发送人：{{item.username}}</div>
                <div>发送时间：{{item.createTime}}</div>
                <div>内容：{{item.messageContent}}</div>
            </el-collapse-item>
            </el-collapse>
            <el-pagination style="margin-top: 23px;"
                    @current-change="handleCurrentChange"
                    :current-page="queryForm.pageIndex"
                    layout="prev, pager, next"
                    :total="total">
                </el-pagination>
        </el-card>
    </div>
</template>

<script>
import {getStuMsgList,readMessage} from '@/api/message/message'
export default {
    name:'Message',
    data(){
        return{
            queryForm:{
                pageIndex: 1,
                pageSize:12
            },
            total:0,
            messageData:[
                {
                    id:1,
                    title:'测试邮件',
                    readed:false,
                    username:'派大星',
                    createTime:'2023-01-30 11:37:21',
                    messageContent:'ggiwcgbdhvbreafcafa聚合成本'
                },
                {
                    id:2,
                    title:'测试邮件2',
                    readed:true,
                    username:'派大星',
                    createTime:'2023-01-30 11:37:21',
                    messageContent:'给我完不成发v盖尔VBVB奥v '
                },
            ],

        }
    },
    mounted(){
        // 初始化信息列表
        this.search();
    },
    methods:{
        async search(){
            let res = await getStuMsgList(this.queryForm);
            console.log(res);

            this.messageData = res.data.records;
            this.total = res.data.total;
        },  
        handleCurrentChange(val){
            this.queryForm.pageIndex = val;
            this.search();
        },
        readMessage(val){
            if(val === ''){
                return
            }
            let msg = this.messageData.filter(item =>{
                return item.id == val;
            })[0];
            if(!msg.readed){
                readMessage(msg.id).then(resp=>{
                    if(resp.code == 200){
                        msg.readed = true;
                        this.$store.dispatch('message/read',1);
                    }
                }).catch(
                    error=>{
                        console.log("NETERROR");
                    }
                )
            }

        }
    }
}
</script>

<style scoped>
    *{
        margin: 0px;
        padding: 0px;
    }
    a{
        text-decoration: none;
        font-size: 14px;
        color: #409Eff;
    }
    .box-card{
        margin: 5px auto;
        height: 80%;
        width: 90%;
    }
    .coll{
        text-align: left;
    }
    .tag{
        width: 45px;
        height: 25px;
        text-align: center;
        font-size: 12px;
        line-height: 25px;
        position: absolute;
        left: 88%;
    }
    .tip{
        margin: 20px 0px;
        font-family: '楷体';
        color: gray;
    }

</style>